<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<div class="hello">
				<ul>
					<li v-for="(item, index) in proData">
						<label for="">
							<input type="checkbox" :value="index" v-model="selectArr">
						</label>{{item.name}}
					</li>：
				</ul>
				<button type="" @click="del">删除</button>{{selectArr}}
				<label>
					<input type="checkbox" class="checkbox" @click="selectAll" />全选
				</label>
			</div>
		</div>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
		<script>
			var proData = [{
				"name": "j1ax"
			}, {
				"name": "j2ax"
			}, {
				"name": "j3ax"
			}, {
				"name": "j4ax"
			}]
			new Vue({
				el: '#app',
				name: 'hello',
				data: {
					proData: proData,
					selectArr: []

				},
				methods: {
					del() {
						let arr = [];
						var len = this.proData.length;
						for (var i = 0; i < len; i++) {
							if (this.selectArr.indexOf(i) >= 0) {
								console.log(this.selectArr.indexOf(i))
							} else {
								arr.push(proData[i])
							}
						}
						console.log(arr);
						this.proData = arr;
						this.selectArr = []	
					},
					selectAll(event) {
						var _this = this;
						console.log(event.currentTarget)
						if (!event.currentTarget.checked) {
							this.selectArr = [];
						} else { //实现全选
							_this.selectArr = [];
							_this.proData.forEach(function(item, i) {
								_this.selectArr.push(i);
							});
						}
					}
				}
			})
		</script>
	</body>
</html>
